[제이쿼리] 요소 복사하기, clone()

똑같은 요소가 필요한 경우... 그래서 특정 요소를 복사해야한다면 제이쿼리에서 지원하는 clone() 메소드를 사용하여 간단하게 만들 수 있다. 간단하게 사용하는 방법은 아래와 같다.

$(선택요소).clone();

clone() 메소드는 단순하게 요소를 복사하는 것 뿐만 아니라 데이터 및 기능들도 함께 복사된다는 특징을 가지고 있다. 하지만 기본값은 false로 되어 있으며 만약 데이터 및 기능까지 복사하기를 원할 경우 매개변수에 true를 넣으면 된다.

또 다른 특징으로는 clone() 메소드를 사용하면 가지고 있는 요소뿐만 아니라 그 안에 포함된 자식요소가 자동으로 모두 복사된다. 자식요소의 복사를 하지 않으려면 cloneNode() 자바스크립트 함수를 사용하는 방법이 있다.


! clone() 예제소스 보기
만약 다음과 같은 버튼들을 똑같이 만들어 웹의 다른 영역에 추가할 경우 다음과 같이 코드를 작성할 수 있다.


위 예제코드는 클래스 buttons2가 비어있다. 이 안에 자식요소로 buttons1의 자식요소를 clone()을 통해 복사한뒤 붙여넣을 것이다.



# 스크립트 실행 후 결과 보기

i. 이전 화면모습

ii. clone() 실행 이후 화면모습